<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="../../js/angular.js" charset="utf-8"></script>
        <script src="../../js/angular-ui-router.js" charset="utf-8"></script>
    </head>
    <body ng-app="App">

        <nav>
            <a ui-sref="home">首页</a>
            <a ui-sref="market">超市</a>
            <a ui-sref="mine">我的</a>
        </nav>

        <!-- 用于存放子页面结构的容器标签，因为拥有ui-view指令 -->
        <div ui-view></div>

    </body>
    <script type="text/javascript">

        // 把需要使用的模块的名称添加到数组中，字符串的形式存在
        var app = angular.module('App', ['ui.router'])

        // 配置路由
        .config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {

            // 设置默认路由
            $urlRouterProvider
            .when('', '/home')
            .when('/home', 'home/goodlist');

            // 路由规则
            $stateProvider
            .state('home', {
                url: '/home',
                templateUrl: 'home.html',
                controller: 'HomeCtrl' // 关联对应的控制器名称
            })
            .state('market', {
                url: '/market',
                templateUrl: 'market.html',
                controller: 'MarketCtrl'
            })
            .state('mine', {
                url: '/mine',
                templateUrl: 'mine.html'
            })
            .state('home.goodlist', {
                url: '/goodlist',
                templateUrl: 'goodlist.html',
                controller: 'GoodListCtrl'
            })
            .state('home.customlist', {
                url: '/customlist',
                templateUrl: 'customlist.html'
            })
            .state('goodDetail', {
                url: '/goodDetail:id', // :id用于接收数据
                templateUrl: 'goodDetail.html',
                controller: 'GoodDetailCtrl'
            })

        }])
    </script>
    <script src="home.js" charset="utf-8"></script>
    <script src="market.js" charset="utf-8"></script>
    <script src="goodlist.js" charset="utf-8"></script>
    <script src="goodDetail.js" charset="utf-8"></script>
</html>
